.dropdown {
	position: relative;
	transition: z-index 0s 0.3s;
	&.open {
		transition: z-index 0s;
		z-index: ($content-base + 1);
	}
	[data-toggle="dropdown"] {
		cursor: pointer;
	}
}

.dropdown-inline {
	display: inline-block;
}

.dropdown-menu {
	background-color: $white;
	border: 1px solid $black-hint;
	border-radius: 0 2px 2px 2px;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.15);
	list-style: none;
	margin: -1px 0 0 !important;
	min-width: 100%;
	opacity: 0;
	padding-top: $margin-base !important;
	padding-right: 0;
	padding-bottom: $margin-base !important;
	padding-left: 0;
	position: absolute !important;
		top: 100%;
		left: 0;
	transform: scale(0.25, 0);
	transform-origin: 0 0;
	transition: all 0.3s $timing;
	transition-property: opacity, transform;
	.dropdown.open & {
		opacity: 1;
		transform: scale(1, 1);
	}
	&.dropdown-menu-right,
	.dropdown.pull-right &,
	.nav.pull-right & {
		border-radius: 2px 0 2px 2px;
		// position
			right: 0;
			left: auto;
		transform-origin: 100% 0;
	}
	a,
	.a {
		color: $black-text !important;
		@include text-overflow();
		&:focus,
		&:hover {
			background-color: $white-bg;
		}
	}
	.active > a,
	.active > .a {
		background-color: $white-bg;
	}
	// no csstransform
		.no-csstransforms & {
			display: none;
		}
		.no-csstransforms .dropdown.open & {
			display: block;
		}
}

.dropdown-toggle {
	transition: background-color 0.3s $timing;
	.dropdown.open & {
		background-color: $black-bg;
		border-radius: 2px 2px 0 0;
	}
}

// colour
	@each $color in $palette-list {
		$i: index($palette-list, $color);

		.dropdown-toggle-#{$color} {
			.dropdown.open & {
				background-color: nth($palette-color-dark, $i);
			}
		}
	}

.dropdown-toggle-btn {
	position: relative;
	z-index: 1;
	.dropdown.open & {
		background-color: $white;
		box-shadow: none;
		color: $black-text;
	}
	~ .dropdown-menu {
		min-width: 101%;
		min-width: calc(100% + 2px);
		padding-top: ($btn-height + $margin-base + ($nav-height - $btn-height)) !important;
		// position
			top: ($margin-base * -1 + ($nav-height - $btn-height) / -2);
			left: -1px;
		transform: scale(1, 0);
		&.dropdown-menu-right,
		.dropdown.pull-right &,
		.nav.pull-right & {
			// position
				right: -1px;
				left: auto;
		}
	}
}

.dropdown-wrap {
	margin-top: $line-height;
	margin-bottom: $line-height;
	@include clearfix();
}
